<template>
  <div class="wrap">
    <div class="top">
      <h2>消息</h2>
      <!-- 绑定通知图标，使用v-bind:src或:src -->
      <img :src="notificationIcon" alt="通知图标" />
    </div>
    <div class="bottom">
      <!-- 顶部消息提醒，使用第一条数据 -->
      <div class="middle" v-if="messageList.length > 0">
        <div class="left">
          <!-- 绑定头像图片 -->
          <img :src="messageList[0].avatar" alt="公司头像" srcset="" />
          <div class="txt">
            <!-- 绑定公司名称 -->
            <span>{{ messageList[0].companyName }}</span>
            <!-- 绑定消息内容 -->
            <p>{{ messageList[0].content }}</p>
          </div>
        </div>
        <img
          class="right"
          src="/public/images/D-_qf-zz_xm_vue3-zhengzhou-team_public_tz_07.jpg"
          alt=""
        />
      </div>

      <!-- 消息列表循环渲染 -->
      <div
        class="item"
        v-for="item in messageList"
        :key="item.id"
        @click="handleMessageClick(item)"
      >
        <img :src="item.avatar" alt="公司头像" srcset="" />
        <div class="txt">
          <span class="time">
            <div>{{ item.companyName }}</div>
            <div class="day">{{ item.time }}</div>
          </span>
          <p>{{ item.content }}</p>

          <!-- 新增时间显示 -->

          <!-- 未读消息标记 -->
          <span v-if="!item.isRead" class="unread-dot"></span>
        </div>
      </div>

      <!-- 加载状态提示 -->
      <div v-if="isLoading" class="loading">加载中...</div>
      <div v-if="!hasMore && messageList.length > 0" class="no-more">
        没有更多消息了
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

// 定义响应式数据
const messageList = ref([]);
const isLoading = ref(false);
const hasMore = ref(true);

// 模拟数据
const mockMessages = [
  {
    id: 1,
    companyName: "微拉智能科技有限公司",
    content: "请问还在考虑新的工作机会吗？",
    time: "今天 10:30",
    isRead: false,
    avatar:
      "https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%276Jyh56yU5bCP5paw5oOF5L6j5aS05YOPXzE3Mjg5NDgyODguMjQ1MjcyMg%3D%3D%27/0.png",
  },
  {
    id: 2,
    companyName: "智联科技有限公司",
    content: "我们看到了你的简历，对您的经验很感兴趣",
    time: "今天 09:15",
    isRead: true,
    avatar: "https://via.placeholder.com/40x40?text=2",
  },
  {
    id: 3,
    companyName: "创新软件有限公司",
    content: "邀请您参加我们公司的技术面试",
    time: "昨天 16:45",
    isRead: false,
    avatar: "https://via.placeholder.com/40x40?text=3",
  },
  {
    id: 4,
    companyName: "未来科技有限公司",
    content: "您申请的职位目前有了新的进展",
    time: "昨天 14:20",
    isRead: true,
    avatar: "https://via.placeholder.com/40x40?text=4",
  },
  {
    id: 5,
    companyName: "数字智能有限公司",
    content: "希望能和您进一步沟通岗位需求",
    time: "前天 11:00",
    isRead: false,
    avatar: "https://via.placeholder.com/40x40?text=5",
  },
];

// 通知图标路径（需根据实际路径调整）
const notificationIcon = ref("/public/tishi.png");

// 组件挂载时初始化数据
const initData = () => {
  isLoading.value = true;
  // 模拟API请求延迟
  setTimeout(() => {
    messageList.value = mockMessages;
    isLoading.value = false;
  }, 500);
};

// 消息点击处理
const handleMessageClick = (item) => {
  // 标记消息为已读
  if (!item.isRead) {
    item.isRead = true;
  }
  console.log("点击消息:", item);

    // 跳转到消息详情页
  router.push({
    name: 'im', // 路由名称，对应路由配置中的name
    query: { id: item.id } // 传递消息ID作为参数
  });
};

// 初始化数据
initData();
</script>

<style scoped>
/* 原有样式保持不变，新增以下样式 */
.time {
  width: 290px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.time .day{
  font-size: 7px;
}

.unread-dot {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #ff4d4f;
  border-radius: 50%;
}

.loading,
.no-more {
  text-align: center;
  padding: 15px 0;
  color: #999;
  font-size: 14px;
}
</style>

<style scoped>
.wrap {
  width: 375px;
  height: 100vh;
  background-color: #f4f4f4;
}
.top {
  width: 375px;
  height: 75px;
  background: #5eae52;
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 0 15px 17px 15px;
  box-sizing: border-box;
}
.top h2 {
  font-family: SourceHanSansCN;
  font-weight: 500;
  font-size: 24px;
  color: #ffffff;
}
.top img {
  width: 19px;
  height: 22px;
}
.bottom .middle {
  width: 345px;
  height: 60px;
  background: #ffffff;
  box-shadow: 0px 0px 11px 0px rgba(1, 64, 153, 0.22);
  border-radius: 10px;
  margin: 15px 15px 5px 15px;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bottom .middle .left {
  display: flex;
  justify-content: space-between;
}
.bottom .middle .right {
  width: 8px;
  height: 14px;
  margin: 0;
}
.bottom .txt {
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bottom span {
  font-family: SourceHanSansCN;
  font-weight: 400;
  font-size: 17px;
  color: #333333;
}
.bottom p {
  font-family: SourceHanSansCN;
  font-weight: 300;
  font-size: 12px;
  color: #999999;
}
.bottom .middle .txt p {
  color: #333333;
}
.bottom img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  margin-right: 15px;
}
.bottom {
  width: 100%;
  background-color: #ffffff;
}
.bottom .item {
  width: 345px;
  height: 70px;
  margin: 0 auto;
  border-bottom: 1px solid #e5e5e5;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
</style>
